<template>
  <div class="tags">
    <!-- @contextmenu="rightClick" 右键点击 -->
    <!-- native 原生
     .native 用法：在一个自定义组件想要给根标签添加事件，但不生效，就给它添加原生的修饰符
    .prevent:阻止默认事件
    -->
    <!-- 标签栏 -->
    <el-tag
      class="tag-in"
      size="medium"
      :closable="index>0"
      v-for="item,index in tags"
      :key="item.path"
      :effect="item.title==$route.meta.title[$route.meta.title.length-1]?'dark':'plain'"
      @click="goTo(item.path)"
      @close="close(index)"
      :disable-transitions="true"
      @contextmenu.native.prevent="rightClick($event,index)"
    >
      <i class="cir" v-show="item.title==$route.meta.title[$route.meta.title.length-1]"></i>
      {{item.title}}
    </el-tag>

    <!-- 菜单栏 -->
    <TagsMenu
      v-show="isShowTagsMenu"
      :clientX="clientX"
      :clientY="clientY"
      :clickIndex="clickIndex"
      :tagsLength="tags.length"
      @fn="clickMenu"
    />
  </div>
</template>

<script>
import TagsMenu from "@/components/TagsMenu.vue";
export default {
  components: {
    TagsMenu,
  },
  data() {
    return {
      tags: [
        {
          title: "首页",
          path: "/home",
        },
      ],
      isShowTagsMenu: false,
      clientX: 0,
      clientY: 0,
      clickIndex: 0,
    };
  },
  mounted() {
    // 给文档添加点击事件
    document.addEventListener("click", this.closeMenu);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.closeMenu);
  },
  methods: {
    clickMenu(i) {
      if (i == 5) {
        // 全部关闭
        // 1 处理数据
        this.tags = [
          {
            title: "首页",
            path: "/home",
          },
        ];
        // 2 跳转到首页
        this.goTo("/home");
      }
    },
    rightClick(e, i) {
      console.log(e);
      console.log("右键点击了", e.clientX, e.clientY);
      this.isShowTagsMenu = true;
      this.clientX = e.clientX;
      this.clientY = e.clientY;
      this.clickIndex = i;
      //   关闭浏览器默认的菜单
      // window.event.returnValue = false;
      // return false;
    },
    // 定义关闭当前菜单的方法
    closeMenu() {
      this.isShowTagsMenu = false;
    },
    goTo(path) {
      this.$router.push(path);
      this.closeMenu();
    },
    close(i) {
      // 先跳转，再删除，是index的问题（如果先删除，会影响我们的逻辑分析）
      //   this.tags[i].title 当前点击的那一项
      // this.$route.meta.title[$route.meta.title.length - 1] 路由的这一项
      // if(判断是不是点击的当前项)
      // 不相等就不用跳转
      //   if (
      //     this.tags[i].title ===
      //     this.$route.meta.title[this.$route.meta.title.length - 1]
      //   ) {

      //   && !i === this.tags.length - 1  表示：且不是最后一项
      if (
        this.tags[i].path === this.$route.path &&
        !i === this.tags.length - 1
      ) {
        // 跳转到下一项
        this.$router.push(this.tags[this.tags.length - 1].path);
      } else if (i === this.tags.length - 1) {
        this.$router.push(this.tags[this.tags.length - 2].path);
      }
      //   关闭当前项，本质上就是删除tags的对应项
      this.tags.splice(i, 1);
      this.closeMenu();
    },
  },

  //   事件监听
  watch: {
    $route: {
      //   页面一刷新就立即监听
      immediate: true,
      handler(newVal, oldVal) {
        console.log(newVal);
        //    if(判断当前的路径有没有在tags里面的路径中)
        // 数组名.find() 查找，调用结果是一个布尔值，找到就返回true,没找到就返回false
        const bool = this.tags.find((item) => {
          // return 新增加的路径是否与当前路径相等
          return newVal.path == item.path;
        });
        if (!bool) {
          this.tags.push({
            title: newVal.meta.title[newVal.meta.title.length - 1],
            path: newVal.path,
          });
        }
      },
    },
  },
};
</script>
 
<style lang = "less" scoped>
.tags {
  padding-left: 20px;
  padding-top: 5px;
  .tag-in {
    margin-right: 5px;
    cursor: pointer;
    .cir {
      width: 8px;
      height: 8px;
      margin-right: 4px;
      background-color: #fff;
      border-radius: 50%;
      display: inline-block;
    }
  }
}
</style>